<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<div class="table-scrollable">
	<div style="margin-top: 20px;"></div>

	<div class="left-box">
		<div class="left-box-title">
			<label style="font-size: 16px; color: #ffffff;">物流商</label>
			<button style="color: #4F94CD; float: right; width: 60px;"
				onclick="addNew()">新增</button>

		</div>
		<div class="left-box-content">
			<c:forEach items="${dlist}" var="d">
				<span
					onclick="showkey('${d.logisticscol}','${d.trackingNumber}','${d.id}','${d.name}')">${d.name}</span>
				<br>
			</c:forEach>
		</div>

	</div>

	<div class="right-box">
		<div class="right-title-h"></div>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">对接方式API</h3>
			</div>
			<div class="panel-body" style="padding: 5%;">
				<span style="margin-left: 35px;">物流名称:</span><input type="text"
					style="width: 80%; margin-left: 3%;" id="shipname" /><br> <br>
				<span style="margin-left: 18px;">EBusinessID:</span><input
					type="text" style="width: 80%; margin-left: 3%;" id="ebid" /><br>
				<br> <span style="margin-left: 38px;">AppKey:</span><input
					type="text" id="appkey" style="width: 80%; margin-left: 3%;" /> <br>
				<br> <br> <input type="text" id="logid"
					style="visibility: hidden;" />
				<button class="btn btn-primary"
					style="float: right; margin-right: 50px;" onclick="saveKey()">保存</button>
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">邮寄方式</h3>
			</div>
			<div class="panel-body" style="padding: 1%;">
				<iframe src="${webRoot}/deliverGoods/listFrame" width="100%"
					height="220px" frameborder=0></iframe>

			</div>
		</div>



	</div>
</div>


<div class="modal fade" id="menuModal" tabindex="-1" role="basic"
	aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true"></button>
				<h4 class="modal-title">新建物流商</h4>
			</div>
			<div class="modal-body">

				<div style="margin: 0 auto; padding: 3% 3% 3% 5%;">
					<span>名称</span><input type="text" id="shipname"
						style="width: 200px; margin-left: 20px;" /><br> <br> <span>代码</span><input
						id="shipcode" type="text" style="width: 200px; margin-left: 20px;" /><br>
					<br> <span>是否有接口</span><input type="checkbox"
						style="margin-left: 30px;" />是<input type="checkbox"
						style="margin-left: 20px;" />否
				</div>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn blue" onclick="addShip()">确定</button>
				<button type="button" class="btn blue" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>


<style type="text/css">
.left-box {
	width: 20%;
	height: 600px;
	border: 2px solid #ffffff;
	float: left;
}

.left-box-title {
	background-color: #4F94CD;
	padding: 5%;
	height: 50px;
}

.left-box-content {
	height: 500px;
	border: 2px solid #4F94CD;
	margin-top: 10px;
	padding: 8%;
}

.left-box-content span {
	font-size: 16px;
}

.right-box {
	width: 60%;
	height: 700px;
	float: left;
	margin-left: 30px;
}

.left-box-content span.active {
	background-color: #4F94CD;
	color: #ffffff;
	border-radius: 1px;
}
</style>

<script type="text/javascript">
	var activeClass = $('.left-box-content span.active');
	$(function() {

		$(".left-box-content span").click(function() {
			if (activeClass != null) {
				activeClass.removeClass('active');
			}
			$(this).addClass('active');
			activeClass = $(this);
		})
	});

	function showkey(key, id, logid, name) {

		$("#shipname").val(name);
		$("#ebid").val(id)
		$("#appkey").val(key)
		$("#logid").val(logid)
	}

	function addNew() {
		$('#menuModal').modal('show');
	}

	function addShip() {
		var shipname = $("#shipname").val();
		var shipcode = $("#shipcode").val();

		$.ajax({
			type : 'post',
			url : webRoot + '/logistics/addShip',
			data : {
				"shipname" : shipname,
				"shipcode" : shipcode
			},
			dataType : 'json',
			success : function(data) {
				alert(data.result)
				$('#menuModal').modal('hide');
			}
		});

	}

	function saveKey() {

		var trackingNumber = $("#ebid").val()
		var logisticscol = $("#appkey").val()
		var id = $("#logid").val()

		$.ajax({
			type : 'post',
			url : webRoot + '/logistics/save',
			data : {
				"id" : id,
				"trackingNumber" : trackingNumber,
				"logisticscol" : logisticscol
			},
			dataType : 'json',
			success : function(data) {
				alert(data.result)
				search();
			}
		});

	}
</script>